<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>签约</title>
    <link rel="stylesheet" type="text/css" href="aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <script src="//at.alicdn.com/t/font_1013425_kwpd6ex9d8f.js"></script>
    <script src="js/js.js"></script>
</head>
<body>


<!--顶部-->
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a href="/" class="aui-pull-left aui-btn">
        <svg class="icon sousuoicon" aria-hidden="true">
            <use xlink:href="#icon-lvsefenkaicankaoxianban-"></use>
        </svg>
        <span style="color: red">  </span>
    </a>
    <div class="aui-title">
        签约成为作者
    </div>
</header>


<!--签约表单-->
<form action="">
    <section class="aui-content-padded">
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-header aui-text-pink">签约后请等待审核</li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            姓名
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="输入真实姓名">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            昵称
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="输入昵称">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            密码
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" placeholder="输入密码">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            确认密码
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" placeholder="确认密码">
                        </div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            性别
                        </div>
                        <div class="aui-list-item-input">
                            <label><input class="aui-radio" type="radio" name="demo1" checked> 男</label>
                            <label><input class="aui-radio" type="radio" name="demo1">女</label>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            学历
                        </div>
                        <div class="aui-list-item-input">
                            <select>
                                <option>请选择</option>
                                <option>小学</option>
                                <option>初中</option>
                                <option>中专</option>
                                <option>高中</option>
                                <option>大专</option>
                                <option>本科</option>
                                <option>硕士研究生</option>
                                <option>博士研究生</option>
                            </select>
                        </div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            验证码
                        </div>
                        <div class="aui-list-item-input">
                            <div class="aui-row">
                                <div class="aui-col-xs-5">
                                    <input id="imgcode" type="text" maxlength="4" placeholder="图片验证码">
                                </div>
                                <div class="aui-col-xs-7">
                                    <img src="images/code.png" style=" width: 80%; height: 100%;" class="aui-pull-right"
                                         onClick="this.src=this.src+'?rand='+Math.random();"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            手机号
                        </div>
                        <div class="aui-list-item-input">
                            <input id="tel" type="number" placeholder="输入手机号">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            验证码
                        </div>
                        <div class="aui-list-item-input">
                            <div class="aui-row">
                                <div class="aui-col-xs-7">
                                    <input type="number" placeholder="手机验证码">
                                </div>
                                <div class="aui-col-xs-5">
                                    <div id="code" style="margin-top: 7px;" class="aui-btn aui-btn-warning ">获取验证码</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
            <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm">提交签约</div>
        </div>
    </section>
</form>

<script>
    $(function () {

        var code = $('#code');
        var tel = $('#tel');
        var imgcode = $('#imgcode');
        var sendLock = true;
        var waitTime = 5;
        var waitTime2 = waitTime;
        var timeers;

        //点击发送
        code.click(function () {
            if (imgcode.val() == '') {
                layer.msg('请先填写图形验证码');
                return;
            }
            checkTelReg = /^1[34578]\d{9}$/;
            if (!checkTelReg.test(tel.val())) {
                layer.msg('手机格式错误');
                return;
            }
            if (sendLock) {
                $(this).addClass('disabled');
                code.text('发送中');
                ajaxSend();
            } else {
                layer.msg('请勿频繁发送');
            }
        });

        //ajax发送
        function ajaxSend() {
            $.ajax({
                url: "?a=sendCode",
                type: "post",
                dataType: "json",
                data: {'tel': tel.val(), 'imgcode': imgcode.val()},
                success: function (data) {
                    if (data.status) {
                        timeers = setInterval(timeer, 1000);
                        sendLock = false;
                    } else {
                        code.text('重新发送验证码');
                    }
                    //发送回应消息
                    layer.msg(data.msg);
                }
            });
        }


        //倒计时
        function timeer() {
            code.text('还剩' + waitTime-- + '秒');
            if (waitTime < 0) {
                code.removeClass('disabled');
                code.text('重新发送验证码');
                waitTime = waitTime2;
                clearInterval(timeers);
                sendLock = true;
            }
        }
    });
</script>

</body>
</html>